<template>
  <div>
    <div class="product-list-header" :class="{'active' : headerActive}" ref="listheader">
      <header class="category-header wrap">
        <i class="iconfont icon-left" @click="goBack"></i>
        <div class="header-search">
          <i class="iconfont icon-search"></i>
          <input type="text" class="search-title" />
        </div>
        <i class="iconfont icon-More"></i>
      </header>
      <section class="select-menu">
        <div
          class="select-item"
          :class="{'active' : orderBy === 'default'}"
          data-order-by="default"
          @click="selectOrder($event)"
        >默认排序</div>
        <div
          class="select-item"
          :class="{'active' : orderBy === 'price_asc'}"
          data-order-by="price_asc"
          @click="selectOrder($event)"
        >
          升序
          <i class="iconfont icon-up1" :class="{'active' : orderBy === 'price_asc'}"></i>
        </div>
        <div
          class="select-item"
          :class="{'active' : orderBy === 'price_desc'}"
          data-order-by="price_desc"
          @click="selectOrder($event)"
        >
          降序
          <i class="iconfont icon-down1" :class="{'active' : orderBy === 'price_desc'}"></i>
        </div>
        <div class="select-item">
          筛选
          <i class="iconfont icon-shaixuan"></i>
        </div>
      </section>
    </div>
    <section class="product-list">
      <div class="product-container">
        <van-pull-refresh
          v-model="isLoading"
          @refresh="onRefresh"
          ref="vanlist"
          success-text="刷新成功"
        >
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了!!!!!"
            @load="onLoad"
          >
            <van-card
              v-for="(item,index) in productList"
              :key="index"
              :num="item.stock"
              :price="item.price"
              :desc="item.subtitle"
              :title="item.name"
              :thumb="item.imageHost+item.mainImage"
              :origin-price="item.originalPrice"
              @click="goDetail(item.id)"
            />
          </van-list>
        </van-pull-refresh>
      </div>
    </section>
  </div>
</template>

<script>
import { getProcuctList } from "../../api";
import { Toast } from "vant";
export default {
  data() {
    return {
      orderBy: "default", // 排序规则
      pageNum: 1, // 当前是第几页数据，
      pageSize: 10, // 每次请求多少条数据
      productList: [], // 存放数据的数组
      headerActive: false,
      loading: false,
      finished: false,
      isLoading: false,
    };
  },
  computed: {
    categoryId: function () {
      return this.$route.params.id;
    },
  },

  methods: {
    fetchProductlist(params) {
      getProcuctList(params, (res) => {
        this.loading = false;
        if (res.data.list.length <= this.pageSize) {
          this.finished = true;
        }
        if (this.isLoading) {
          // 下拉刷新赋值新数据
          this.productList = res.data.list;
          this.isLoading = false;
          this.finished = false; // 允许上拉加载
          Toast("刷新成功");
        } else {
          // 上拉加载更多 合并数据
          this.productList = this.productList.concat(res.data.list);
        }
      });
    },
    goBack() {
      this.$router.go(-1);
    },
    selectOrder(e) {
      let orderBy = e.currentTarget.getAttribute("data-order-by");
      this.onRefresh() 
      if (this.orderBy === orderBy) {
        //如果本身就是默认，再点击就return，节流
        return;
      }
      this.orderBy = orderBy;
      this.fetchProductlist({
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        orderBy: this.orderBy,
      });
    },

    //商品详情页
    goDetail(id) {
      this.$router.push("/product/" + id);
    },
    onLoad() {
      this.loading = true;
      this.fetchProductlist({
        pageSize: this.pageSize,
        pageNum: this.pageNum++,
      });
    },
    onRefresh() {
      this.isLoading = true;
      this.pageNum = 1;
      this.fetchProductlist({
        pageSize: this.pageSize,
        pageNum: this.pageNum++,
      });
    },
  },
  mounted() {
    this.$nextTick(() => {
      //window.screen.listheader 屏幕高度
      //this.$refs.listheader.clientHeight 头部高度
      //this.$refs.vanlist 组件对象
      //this.$refs.vanlist.$el 标签元素对象
      this.$refs.vanlist.$el.style.height =
        window.screen.height - this.$refs.listheader.clientHeight - 20 + "px";
      this.onRefresh();
    });
  },
};
</script>

<style lang="scss" scoped>
@import "../../commin/style/mixin";
.product-list-header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1000;
  background: #fff;

  .category-header {
    @include fj;
    width: 100%;
    height: 100px;
    line-height: 100px;
    padding: 0 30px;
    @include boxSizing;
    font-size: 30px;
    color: #656771;
    z-index: 10000;

    &.active {
      background: $red;
    }

    .icon-left {
      font-size: 50px;
      font-weight: bold;
    }

    .header-search {
      display: flex;
      width: 76%;
      height: 40px;
      line-height: 40px;
      margin: 20px 0;
      padding: 10px 0;
      color: #232326;
      background: #f7f7f7;
      @include borderRadius(40px);

      .icon-search {
        padding: 0 10px 0 40px;
        font-size: 34px;
      }

      .search-title {
        font-size: 24px;
        color: #666;
        background: #f7f7f7;
      }
    }

    .icon-More {
      font-size: 40px;
    }

    .search-btn {
      height: 70px;
      margin: 15px 0;
      line-height: 70px;
      padding: 0 10px;
      color: #fff;
      background: $red;
      @include borderRadius(10px);
    }
  }

  .select-menu {
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: 100px;
    background: #fff;

    .select-item {
      flex: 1;
      height: 100%;
      text-align: center;
      line-height: 100px;
      font-size: 30px;
      border-top: 1px solid #dcdcdc;
      border-bottom: 1px solid #dcdcdc;

      .iconfont {
        &.icon-down1 {
          color: #999;
          padding-left: 10px;
          font-size: 22px;
        }

        &.icon-up1 {
          @extend .icon-down1;
          font-size: 34px;
        }

        &.icon-shaixuan {
          @extend .icon-down1;
          font-size: 28px;
        }
      }
      &.active {
        color: $red;
      }
    }
  }
}
.product-list {
  width: 100%;
  .product-container {
    position: absolute;
    left: 0;
    top: 220px;
    width: 100%;
    padding: 5px 10px;
    box-sizing: border-box;
    overflow-y: scroll;
    height: auto;
    .van-pull-refresh {
      overflow-y: scroll;
    }
  }
}
</style>